<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'getPerformance'})}`"></div>
	<template v-if="support">
		<onekit-button type="primary" @Tap="getPerformanceInfo">获取性能数据</onekit-button>
		<onekit-view onekit-class="page-section">
			<onekit-view v-for="(item,index) in array" :key="index" onekit-class="performance-list">
				<onekit-view onekit-class="performance-item">
					<onekit-view>{{item.entryType}}：{{item.name}}</onekit-view>
					<onekit-view v-if="item.duration">耗时：{{item.duration}}</onekit-view>
					<onekit-view v-if="item.startTime">时间：{{item.startTime}}</onekit-view>
				</onekit-view>
			</onekit-view>
		</onekit-view>
	</template>
	<onekit-view v-else onekit-style="text-align: center">微信版本过低，暂不支持本功能</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "性能数据",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
const util = require('./util');
const performance = wx.getPerformance?wx.getPerformance():{
};
const performanceObserver = performance.createObserver?performance.createObserver():null;
export default Page(ONEKIT_JSON,["support","array"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'周期性缓存',
        "path":'packageAPI/pages/get-performance/get-performance'
};
    },
    "data":{
        "array":[
        ],
        "support":false
},
    "onLoad"(){
      console.log('canIUse:getPerformance:',wx.canIUse('getPerformance'));
      let canIUse = false;
      if(wx.getPerformance)
      {
        canIUse = true;
      };
      this.setData({
        "support":canIUse
});
    },
    "getPerformanceInfo"(){
      const EntryList = performance.getEntries();
      const array = [
    ];
      EntryList.forEach((item)=>{array.push({
        "entryType":util.renderEntryType(item.entryType),
        "name":util.renderName(item.name),
        "duration":util.renderDuration(item.duration),
        "startTime":util.renderStartTime(item.startTime)
})});
      this.setData({
        array
});
    },
    "startObserver"(){
      performanceObserver.observe({
        "entryTypes":[
          'render',
          'script',
          'navigation'
        ]
});
    },
    "stopObserver"(){
      performanceObserver.disconnect();
    }
});

</script>
<style 
 lang="css">
.container {
  display: block ;
}
.performance-list {
  display: flex ;
  flex-direction: column ;
  width: 100% ;
  align-items: center ;
}
.performance-item {
  margin: 15px 0 ;
  width: 80% ;
}
</style>